<template>
    <div class="wrap">
        <div class="card">
            <el-col :span="5">
                <el-card shadow="hover">
                <dl>
                    <dt><i class="el-icon-hot-water"></i></dt>
                    <dd>
                        <p>历史接待次数</p>
                        <h4>200</h4>
                    </dd>
                </dl>
                </el-card>
            </el-col>
            <el-col :span="5">
                <el-card shadow="hover">
                <dl>
                    <dt><i class="el-icon-s-marketing"></i></dt>
                    <dd>
                        <p>历史接待人数</p>
                        <h4>200</h4>
                    </dd>
                </dl>
                </el-card>
            </el-col>
            <el-col :span="5">
                <el-card shadow="hover">
                <dl>
                    <dt><i class="el-icon-s-flag"></i></dt>
                    <dd>
                        <p>今日接待次数</p>
                        <h4>200</h4>
                    </dd>
                </dl>
                </el-card>
            </el-col>
            <el-col :span="5">
                <el-card shadow="hover">
                <dl>
                    <dt><i class="el-icon-s-custom"></i></dt>
                    <dd>
                        <p>今日接待人数</p>
                        <h4>200</h4>
                    </dd>
                </dl>
                </el-card>
            </el-col>
        </div>
        <div class="lists">
            <div class="tableHeader"><span>数据列表</span><el-button>添加</el-button></div>
        </div>
        <div class="list">
            <table>
            <tbody>
                <tr class="head">
                    <th>成员账号</th>
                    <th>客服昵称</th>
                    <th>添加时间</th>
                    <th>最后登录</th>
                    <th>是否启用</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(v,i) in tabData" :key='i'>
                    <td>{{v.account}}</td>
                    <td>{{v.nickname}}</td>
                    <td>{{v.date}}</td>
                    <td>{{v.lasttime}}</td>
                    <td> <el-switch
                    v-model="v.flag"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                    </el-switch></td>
                    <td><div class="btns">
                        <el-button type="text">查看记录</el-button>
                        <el-button type="text"  @click="open(v)">编辑</el-button>
                    </div></td>
                </tr>
            </tbody>
        </table>
        </div>
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
    <el-form :model="form">
        <el-form-item label="客服昵称" :label-width="formLabelWidth">
        <el-input v-model="form.nickname" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="客服账号" :label-width="formLabelWidth">
        <el-input v-model="form.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注信息" :label-width="formLabelWidth">
        <el-input v-model="tips" autocomplete="off"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editItem()">确 定</el-button>
    </div>
    </el-dialog>
    </div>
</template>
<script>
import axios from "axios"
export default {
    data(){
        return{
            tabData:[],
            dialogFormVisible: false,
            form:{
                nickname:'',
                account:'',
                date:new Date().toLocaleString(),
                lasttime:new Date().toLocaleString(),
                flag:true,
                id:''
            },
            tips:'',
            formLabelWidth: '120px'
        }
    },
    methods:{
        getList(){
            axios.post('/api/list').then(resp=>{
                this.tabData=resp.data.data
            })
        },
        open(v){
            this.dialogFormVisible=true;
            axios.post('/api/edit',({id:v.id})).then(resp=>{
                console.log(resp.data.data)
                const {account,nickname,id}=resp.data.data;
                this.form.nickname=nickname 
                this.form.account=account
                this.form.id=id
            })
        },
        editItem(){
            this.dialogFormVisible=false;
            axios.post('/api/edititem',(this.form)).then(resp=>{
                console.log(resp.data.data)
                this.getList()
            })       
            }
    },
    created(){
        this.getList()
    }
}
</script>
<style lang="scss" scoped>
    .wrap{
        width: 100%;
        height: 100%;
    }
    .card{
        width: 100%;
        height: 160px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        dl{
            height: 80px;
            display: flex;
            justify-content: center;
            i{
                font-size: 80px;
                color: rgb(64, 228, 179);
            }
            dd{
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                p{
                    font-size: 16px;
                    color: #666;
                }
                h4{
                    font-size: 18px;
                }
            }
        }
    }
    .tableHeader{
        width: 100%;
        height: 60px;
        background: #f3f3f3;
        display: flex;
        justify-content: space-between;
        padding: 20px;
        align-items: center;
        border-radius: 15px 15px 0 0;
        border-bottom:1px solid #ccc ;
    }
    .list{
        width: 100%;
        height: 350px;
        overflow: hidden;
        overflow-y: scroll;
        table{
            width: 100%;
            border-radius: 15px;
            padding: 5px;
            border-collapse: collapse;
            tr{
                width: 100%;
                text-align: center;
            }
            td{
                height: 40px;
                border: 1px solid #ccc;
            }
            th{
                border: 1px solid #ccc;
            }
            .head{
                height: 50px;
                background: #f2f2f2;
                position: sticky;
                top: 0;
                z-index: 999;
            }
        }
    }
</style>